<div>
    <Collapse DefaultActiveKey="@(new[] { "1" })"
              OnChange="Callback"
              ExpandIconPosition="@expandIconPosition"
              ExpandIcon="caret-right">
        <Panel Header="This is panel header 1" Key="1" ExtraTemplate="@extra">
            <div>@text</div>
        </Panel>
        <Panel Header="This is panel header 2" Key="2" ExtraTemplate="@extra">
            <div>@text</div>
        </Panel>
        <Panel Header="This is panel header 3" Key="3">
            <ExtraTemplate>
                <div @onclick:stopPropagation><Icon Type="snippets" /></div>
            </ExtraTemplate>
            <ChildContent>
                <div>@text</div>
            </ChildContent>
        </Panel>
    </Collapse>
</div>
@code{

    string text = @"
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
";

    RenderFragment extra =@<div @onclick:stopPropagation><Icon Type="setting"></Icon></div>;

        string expandIconPosition = "left";

        void Callback(string[] keys)
        {
            Console.WriteLine(string.Join(',',keys));
        }
    }
